<template>
  <div class="wrapper">
    <div class="container">
      <div class="design">
        <div class="pill pill-1"></div>
        <div class="pill pill-2"></div>
        <div class="pill pill-3"></div>
        <div class="pill pill-4"></div>
      </div>
      <div class="login">
        <h3 class="title">用户登录</h3>
        <div class="text-input">
          <el-icon><UserFilled /></el-icon>
          <input v-model="username" type="text" autocomplete="off" placeholder="用户名" />
        </div>
        <div class="text-input">
          <el-icon><MaterialSymbolsLock /></el-icon>
          <input v-model="password" type="password" autocomplete="off" placeholder="密码" />
        </div>
        <button class="login-btn" @click="onSubmit">登 录</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import { UserFilled, MaterialSymbolsLock } from '@/config/icons'

const userStore = useUserStore()
const router = useRouter()

const username = ref('')
const password = ref('')

const onSubmit = async () => {
  const status = await userStore.login({
    username: username.value,
    password: password.value
  })
  if (status) {
    // 登录成功，跳转到主页
    router.push({ name: 'home' })
  }
}
</script>

<style lang="scss" scoped>
@import url('./LoginView.scss');
</style>
